@if (type === "Text") {
    <div class="input-group">
        <sqx-code-editor [completion]="editorCompletion" [mode]="editorMode" singleLine="true" [snippets]="mode === 'Script'" />
        <div class="input-group-apppend">
            <select class="form-select" [disabled]="disabled" [ngModel]="mode" (ngModelChange)="setMode($event)" tabindex="-1">
                @for (supportedMode of modes; track supportedMode) {
                    <option [ngValue]="supportedMode">{{ supportedMode }}</option>
                }
            </select>
        </div>
    </div>
} @else {
    <div class="btn-group btn-group-sm">
        @for (supportedMode of modes; track supportedMode) {
            <button class="btn btn-toggle" [class.active]="mode === supportedMode" (click)="setMode(supportedMode)" tabindex="-1" type="button">
                {{ supportedMode }}
            </button>
        }
    </div>
    <sqx-code-editor [completion]="editorCompletion" [height]="350" [mode]="editorMode" [snippets]="mode === 'Script'" />
}
